﻿@model IEnumerable<vncom.Models.ProductCatalogTree>
@{
    Layout = null;
}
<style type="text/css">
    .cssParent
    {
        display:block;
    }
    .cssTextBoxWidth
    {
        width:50%;
    }
</style>
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<div>
    <ul>
        @foreach (var items in Model)
        {
            string PLabel = "PLabel_" + items.DanhMucSanPhamID;
            string PDiv = "PDiv_" + items.DanhMucSanPhamID;
            string PValue = "PValue_" + items.DanhMucSanPhamID;
            string NewID = "New_" + items.DanhMucSanPhamID;
        <li><label id="@PLabel">@items.TenDanhMuc</label> <img onclick="editBy(@items.DanhMucSanPhamID);" alt="" src="/Images/Icons/Edit.gif" />&nbsp;<img onclick="DeleteBy(@items.DanhMucSanPhamID);" alt="" src="/Images/Icons/delete.gif" />
            <div style="display:none;" id="@PDiv">
                <input type="text" id="@PValue" class="cssTextBoxWidth" value="@items.TenDanhMuc" />&nbsp;<img onclick="AddBy(@items.DanhMucSanPhamID);" alt="" src="/Images/Icons/Save_16X16_Standard.png" />&nbsp;<img onclick="OutBy(@items.DanhMucSanPhamID);" alt="" src="/Images/Icons/Restore_16x16_Standard.png" />
            </div>
            @if (items.ListTree.Count > 0)
            {
            <ul>
                @foreach (var item in items.ListTree)
                {
                    string Label = "PLabel_" + item.DanhMucSanPhamID;
                    string Div = "PDiv_" + item.DanhMucSanPhamID;
                    string Value = "PValue_" + item.DanhMucSanPhamID;
                <li><label id="@Label">@item.TenDanhMuc</label> <img onclick="editBy(@item.DanhMucSanPhamID);" alt="" src="/Images/Icons/Edit.gif" />&nbsp;<img onclick="DeleteBy(@item.DanhMucSanPhamID);" alt="" src="/Images/Icons/delete.gif" />
                    <div style="display:none;" id="@Div">
                        <input type="text" id="@Value" class="cssTextBoxWidth" value="@item.TenDanhMuc" />&nbsp;<img onclick="AddBy(@item.DanhMucSanPhamID);" alt="" src="/Images/Icons/Save_16X16_Standard.png" />&nbsp;<img onclick="OutBy(@item.DanhMucSanPhamID);" alt="" src="/Images/Icons/Restore_16x16_Standard.png" />
                    </div>
                </li>
                }
                <li><input type="text" id="@NewID" class="cssTextBoxWidth" value="" /><img onclick="AddNew(@items.DanhMucSanPhamID);" alt="" src="/Images/Icons/add.gif" /></li>
            </ul>
            }
            else
            {
            <ul>
                <li><input type="text" id="@NewID" class="cssTextBoxWidth" value="" /><img onclick="AddNew(@items.DanhMucSanPhamID);" alt="" src="/Images/Icons/add.gif" /></li>
            </ul>
            }
        </li>
        }
        <li><input type="text" id="NewParent" class="cssTextBoxWidth" value="" /><img onclick="AddNew('00');" alt="" src="/Images/Icons/add.gif" /></li>
    </ul>
</div>

<script type="text/javascript">
        function editBy(id) {
            var ids = "PDiv_" + id;
            var name = document.getElementById(ids);
            name.style.display = "block";
        }

        function DeleteBy(id) {
            if (confirm("Bạn có chắc muốn xóa")) {
                var requestURL = '/api/ApiCategory/ApiCategoryDel/' + id;
                $.ajax({
                    url: requestURL,
                    type: "GET"
                }).done(function (data) {
                    window.location.reload(true);
                });
            }
        }

        function OutBy(id) {
            var ids = "PDiv_" + id;
            var name = document.getElementById(ids);
            name.style.display = "none";
        }

        function AddBy(id) {
            var idP = "PDiv_" + id;
            var name = document.getElementById(idP);
            var idV = "PValue_" + id;
            var valu = document.getElementById(idV);
            var idLB = "PLabel_" + id;
            var labe = document.getElementById(idLB);

            var requestURL = '/api/ApiCategory/ApiCategoryUpdate?id=' + id + '&name=' + valu.value;
            $.ajax({
                url: requestURL,
                type: "GET"
            });
            labe.innerHTML = valu.value;
            name.style.display = "none";
        }

        function AddNew(id) {
            var cP = "New_" + id;
            var cvalu = document.getElementById(cP);
            var pRent = document.getElementById("NewParent");
            var ParentID = 0;
            var TenDanhMuc = "";
            if (id == "00") {
                TenDanhMuc = pRent.value;
            }
            else {
                ParentID = id;
                TenDanhMuc = cvalu.value;
            }
            var requestURL = '/api/ApiCategory/ApiCategoryAdd?id=' + ParentID + '&name=' + TenDanhMuc;
            $.ajax({
                url: requestURL,
                type: "GET"
            }).done(function (data) {
                window.location.reload(true);
            });
        }

        $(window).bind(
            "beforeunload",
            function () {
                var requestURL = '/api/ApiCategory/ApiCategoryClose';
                var t = 9;
                $.ajax({
                    url: requestURL,
                    type: "GET"
                });
            }
        )
</script>